<template>
  <view class="add-houseInfo">
    <view class="houseInfo">
      <view class="title">
        房屋信息
      </view>
      <view class="content">
        <!-- {{ houseInfo.point+houseInfo.building+houseInfo.room }} -->
      </view>
    </view>
    <view class="ownerInfo">
      <view class="title">
        业主信息
      </view>
      <view class="content">
        <u--form labelPosition="left" :model="houseInfo" :rules="rules" ref="houseInfo">
          <u-form-item labelWidth="109" label="姓名" prop="name" borderBottom ref="item1">
            <u--input v-model="houseInfo.name" placeholder="请填写您的真实姓名" border="none"></u--input>
          </u-form-item>
          <u-form-item labelWidth="109" label="性别" prop="gender" borderBottom ref="item1">
            <u-radio-group v-model="houseInfo.gender" placement="row">
              <u-radio activeColor="#5591AF" :customStyle="{marginRight: '60rpx'}" v-for="(item, index) in radiolist"
                :key="index" :label="item.sex" :name="item.id">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="109" label="手机号" prop="mobile" borderBottom ref="item1">
            <u--input v-model="houseInfo.mobile" placeholder="请输入您的手机号" border="none"></u--input>
            <block slot="right">
              <u-count-down @finish="onFinish" v-if="isShowCountDown" :time="6 * 1000" format="ss s后可重新发送">
              </u-count-down>
              <view v-else @click="getCode" class="code-btn">获取验证码</view>
            </block>
          </u-form-item>
          <u-form-item labelWidth="109" label="验证码" borderBottom ref="item1">
            <u--input v-model="code" placeholder="请输入手机验证码" border="none"></u--input>
          </u-form-item>
        </u--form>
      </view>
    </view>

    <!-- 模拟短信提示 -->
    <u-notify @click.native="copyCode" ref="uNotify"></u-notify>

    <!-- 身份证 -->
    <view class="owner-photo">
      <view class="title">
        <view>上传本人身份证照片</view>
        <view>请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。</view>
      </view>
      <view class="upload-photo">
        <view class="photo-box">
          <view v-if="!houseInfo.idcardFrontUrl" @click="chooseIdcardFrontUrl">
            <image src="../../static/icon/add.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
            <text>上传人像面照片</text>
          </view>
          <image v-else :src="houseInfo.idcardFrontUrl" style="width: 690rpx;height: 340rpx;"></image>
        </view>
      </view>
      <view class="upload-photo">
        <view class="photo-box" @click="chooseIdcardBackUrl">
          <view v-if="!houseInfo.idcardBackUrl">
            <image src="../../static/icon/add.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
            <text>上传国徽面照片</text>
          </view>
          <image v-else :src="houseInfo.idcardBackUrl" style="width: 690rpx;height: 340rpx;"></image>
        </view>
      </view>
    </view>

    <!-- 提交审核 -->
    <view class="foot">
      <life-button :isFixed="false" btn-height="145rpx" icon="../../static/icon/check.png">提交审核</life-button>
    </view>
  </view>
</template>

<script>
  import {
    sendCode,
  } from '@/api/login.js'
  export default {
    data() {
      return {
        code: '',
        isShowCountDown: false,
        houseInfo: {
          point: '',
          building: '',
          room: '',
          name: '',
          gender: 1,
          mobile: '18900000000',
          idcardFrontUrl: '',
          idcardBackUrl: '',
        },
        rules: {
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: ['change', 'blur']
            },
            {
              pattern: /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/,
              message: '姓名格式错误',
              trigger: ['change', 'blur']
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ],
        },
        // 基本案列数据
        radiolist: [{
          id: 1,
          sex: '男'
        }, {
          id: 0,
          sex: '女'
        }],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        radiovalue1: '男',
        fileList6: [],
        flag: true,
      };
    },
    onLoad({
      area,
      build,
      room
    }) {
      this.houseInfo.point = area
      this.houseInfo.building = build
      this.houseInfo.room = room
    },
    methods: {
      getCode() {
        // 校验手机号
        this.$refs.houseInfo.validateField('mobile', async (errRes) => {
          if (errRes.length) return
          // 手机号合法，发请求
          const res = await sendCode(this.houseInfo.mobile)
          // message
          const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
          this.code = res.data.code
          // 短信提示
          this.$refs.uNotify.show({
            top: 10,
            type: 'success',
            message: message,
            duration: 1000 * 6,
            fontSize: 14
          })
          // 震动
          uni.vibrateLong()
          // 显示倒计时
          this.isShowCountDown = true
        })
      },
      // 复制
      copyCode() {
        uni.setClipboardData({
          data: this.code
        })
      },
      // 倒计时结束
      onFinish() {
        this.isShowCountDown = false
      },
      //选择人像图片
      chooseIdcardFrontUrl() {
        uni.chooseImage({
          count: 6, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            this.houseInfo.idcardFrontUrl = res.tempFilePaths[0]
          }
        });
      },
      //选择国徽图片
      chooseIdcardBackUrl() {
        uni.chooseImage({
          count: 6, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            this.houseInfo.idcardBackUrl = res.tempFilePaths[0]
          }
        });
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.houseInfo.setRules(this.rules);
    }
  }
</script>

<style lang="scss" scoped>
  .add-houseInfo {
    height: 100%;
    background-color: #FAFAFA;

    .houseInfo {
      .title {
        color: #979797;
        font-size: 24rpx;
        padding: 0 30rpx;
        line-height: 86rpx;
      }

      .content {
        width: 750rpx;
        height: 102rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 28rpx;
      }
    }

    .ownerInfo {
      .title {
        color: #979797;
        font-size: 24rpx;
        padding: 0 30rpx;
        line-height: 86rpx;
      }

      .content {
        padding: 0 30rpx;
        background-color: #fff;

        ::v-deep .u-form {
          .u-form-item {
            .code-btn {
              color: #5591AF;
              font-size: 28rpx;
            }

            .u-count-down__text {
              color: #5591AF;
              font-size: 28rpx;
            }

            .u-line {
              border-color: #F2F2F6 !important;
            }

            .u-form-item__body {
              height: 102rpx;
              padding: 0;
            }

            .u-form-item__body__left__content__label {
              font-size: 28rpx !important;
              color: #333 !important;
            }

            .u-form-item__body__right__message {
              margin-left: 0 !important;
              // margin-top: -30rpx;
            }
          }
        }
      }
    }

    .owner-photo {
      padding: 30rpx 0rpx 30rpx 30rpx;
      background-color: #FFFFFF;

      .title {
        width: 100%;
        height: 106rpx;
        border-bottom: 1rpx solid #F2F2F6;

        view:nth-child(1) {
          color: #333333;
          font-size: 28rpx;
          line-height: 1.5;
          margin-bottom: 10rpx;
        }

        view:nth-child(2) {
          color: #C3C3C5;
          font-size: 22rpx;
          line-height: 1.5;
        }
      }

      .upload-photo {
        margin-top: 20rpx;

        .photo-box {
          width: 690rpx;
          height: 340rpx;
          border-radius: 10rpx;
          background: #FAFAFA;

          view {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text {
              margin-top: 15rpx;
              color: #7694B0;
              font-size: 30rpx;
            }
          }
        }
      }
    }

    .foot {
      background-color: #FAFAFA;
      padding-top: 62rpx;
    }
  }
</style>
